<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>7. Vue移动端 搜索功能设置 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vant, Vue, Vue移动端" />
  
  <meta name="description" content="::: tip 介绍 Vue移动端 搜索功能 通过动态路由传参 设置搜索页:::">
<meta property="og:type" content="article">
<meta property="og:title" content="7. Vue移动端 搜索功能设置">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/11/Vue_Mobile_Projects/8_search/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 Vue移动端 搜索功能 通过动态路由传参 设置搜索页:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-10T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.546Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue移动端">
<meta property="article:tag" content="Vant">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">7. Vue移动端 搜索功能设置</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-11</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~19.50K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178546"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>Vue移动端 搜索功能 通过动态路由传参 设置搜索页<br><br>:::</p>
<span id="more"></span>

<h2 id="设置一级路由搜索组件-点击跳转搜索-search-vue"><a href="#设置一级路由搜索组件-点击跳转搜索-search-vue" class="headerlink" title="设置一级路由搜索组件 点击跳转搜索 search.vue"></a>设置一级路由搜索组件 点击跳转搜索 <code>search.vue</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/search">Vant搜索插件</a></p>
<blockquote>
<p>目标：实现搜索组件基本布局</p>
<p>效果: 点击搜索按钮 弹出一级路由的 搜索组件</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/XZdqocaOlE5Qn68.png" alt="image.png"></p>
<h3 id="搜索功能组件基本样式-search-vue"><a href="#搜索功能组件基本样式-search-vue" class="headerlink" title="搜索功能组件基本样式 search.vue"></a>搜索功能组件基本样式 <code>search.vue</code></h3><p>一级路由组件 需要单独创建文件夹 创建Vue文件 <code>search文件夹 里面 search.vue</code></p>
<ul>
<li><code>template</code>模板内容<ul>
<li><code>v-if v-else</code> 来切换 历史搜索 和 搜索联想 </li>
<li><code>$router.back()</code>是回退到上一个路由组件</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;!-- 导航栏 --&gt;</span><br><span class="line">    &lt;van-nav-bar title=&quot;搜索中心&quot; left-arrow @click-left=&quot;$router.back()&quot; /&gt;</span><br><span class="line">    &lt;!-- 搜索框 Vant search 提供的方法  @search按下回车点击搜索触发 .trim Vue提供的修饰符 用户去除两边空格(防止用户在两边输入空格)--&gt;</span><br><span class="line">    &lt;van-search @search=&#x27;handleSearch&#x27; v-model.trim=&quot;q&quot; placeholder=&quot;请输入搜索关键词&quot; shape=&quot;round&quot; /&gt;</span><br><span class="line">    &lt;!-- 通过v-if v-else 判断 如果有输入内容 就切换成联想列表 没有输入内容就显示历史记录 --&gt;</span><br><span class="line">    &lt;!-- 联想列表 --&gt;</span><br><span class="line">    &lt;van-cell-group class=&quot;suggest-box&quot; v-if=&#x27;q&#x27;&gt;</span><br><span class="line">      &lt;van-cell icon=&quot;search&quot;&gt;</span><br><span class="line">        &lt;p&gt;&lt;span&gt;j&lt;/span&gt;ava&lt;/p&gt;</span><br><span class="line">      &lt;/van-cell&gt;</span><br><span class="line">    &lt;/van-cell-group&gt;</span><br><span class="line">    &lt;!-- 搜索历史 --&gt;</span><br><span class="line">    &lt;!-- v-else-if判断 如果存在搜索数据 才会显示内搜索记录  否则就不显示搜索记录 --&gt;</span><br><span class="line">    &lt;div class=&quot;history-box&quot; v-else-if=&quot;history.length&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;head&quot;&gt;</span><br><span class="line">        &lt;span&gt;历史记录&lt;/span&gt;</span><br><span class="line">        &lt;van-icon name=&quot;delete&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;van-cell-group&gt;</span><br><span class="line">        &lt;van-cell v-for=&quot;(item,index) in history&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">          &lt;a class=&quot;word_btn&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/a&gt;</span><br><span class="line">          &lt;van-icon class=&quot;close_btn&quot; slot=&quot;right-icon&quot; name=&quot;cross&quot; /&gt;</span><br><span class="line">        &lt;/van-cell&gt;</span><br><span class="line">      &lt;/van-cell-group&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code>脚本</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Search&#x27;,</span><br><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      // 搜索关键字(搜索框里面的内容)</span><br><span class="line">      q: &#x27;&#x27;,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>style</code> 样式</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;style scoped lang=&#x27;less&#x27;&gt;</span><br><span class="line">.history-box &#123;</span><br><span class="line">  padding: 0 20px;</span><br><span class="line">  .head &#123;</span><br><span class="line">    line-height: 36px;</span><br><span class="line">    color: #999;</span><br><span class="line">    .van-icon &#123;</span><br><span class="line">      font-size: 16px;</span><br><span class="line">      float: right;</span><br><span class="line">      margin-top: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  .van-cell &#123;</span><br><span class="line">    padding: 10px 0;</span><br><span class="line">  &#125;</span><br><span class="line">  .word_btn &#123;</span><br><span class="line">    color: #3296fa;</span><br><span class="line">  &#125;</span><br><span class="line">  .close_btn &#123;</span><br><span class="line">    margin-top: 5px;</span><br><span class="line">    color: #999;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">.suggest-box &#123;</span><br><span class="line">  /deep/ .van-cell &#123;</span><br><span class="line">    padding: 10px 20px;</span><br><span class="line">    color: #999;</span><br><span class="line">    p &#123;</span><br><span class="line">      span &#123;</span><br><span class="line">        color: red;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="配置搜索页面的一级路由-router-文件-index-js"><a href="#配置搜索页面的一级路由-router-文件-index-js" class="headerlink" title="配置搜索页面的一级路由 router 文件 index.js"></a>配置搜索页面的一级路由 <code>router 文件 index.js</code></h3><ul>
<li>导入搜索Vue组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> search <span class="keyword">from</span> <span class="string">&#x27;../views/search/search&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>routes</code> 里面配置路径</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">path</span>: <span class="string">&#x27;/search&#x27;</span>,</span><br><span class="line">  <span class="attr">component</span>: search</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="首页-点击搜索-跳转到搜索页Home-vue"><a href="#首页-点击搜索-跳转到搜索页Home-vue" class="headerlink" title="首页 点击搜索 跳转到搜索页Home.vue"></a>首页 点击搜索 跳转到搜索页<code>Home.vue</code></h3><ul>
<li><code>template</code> 模板<ul>
<li>点击后跳转到 搜索组件 <code> @click-right</code>是Vant提供点击方法</li>
</ul>
</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;!-- 顶部内容 --&gt;</span><br><span class="line"><span class="addition">+    &lt;van-nav-bar title=&quot;主页&quot; right-text=&quot;搜索&quot; @click-right=&#x27;$router.push(&quot;/search&quot;)&#x27; /&gt;</span></span><br><span class="line">    &lt;!-- 中间内容 --&gt;</span><br><span class="line">    &lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">      &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;!-- 底部内容 --&gt;</span><br><span class="line">    &lt;van-tabbar v-model=&quot;active&quot;&gt;</span><br><span class="line">      &lt;van-tabbar-item to=&quot;/home/main&quot; icon=&quot;home-o&quot;&gt;首页&lt;/van-tabbar-item&gt;</span><br><span class="line">      &lt;van-tabbar-item to=&quot;/home/video&quot; icon=&quot;search&quot;&gt;视频&lt;/van-tabbar-item&gt;</span><br><span class="line">      &lt;van-tabbar-item to=&quot;/home/question&quot; icon=&quot;friends-o&quot;&gt;问答&lt;/van-tabbar-item&gt;</span><br><span class="line">      &lt;van-tabbar-item to=&quot;/home/my&quot; icon=&quot;setting-o&quot;&gt;个人&lt;/van-tabbar-item&gt;</span><br><span class="line">    &lt;/van-tabbar&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>路由对象中提供了跳转页面相关的方法：<ol>
<li>back() 向后跳一步</li>
<li>forward 向前跳一步</li>
<li>go(n) 负值表示向后跳，正值表示向前跳</li>
<li>push() 跳转到指定路径</li>
</ol>
</li>
<li>v-model的修饰符<ol>
<li>lazy表示切换input事件到change事件</li>
<li>number表示转换字符串为数值</li>
<li>trim 表示去掉首位空格</li>
</ol>
</li>
</ol>
<h2 id="显示历史搜索内容-search-vue"><a href="#显示历史搜索内容-search-vue" class="headerlink" title="显示历史搜索内容 search.vue"></a>显示历史搜索内容 <code>search.vue</code></h2><blockquote>
<p>目标：显示历史搜索内容</p>
<p>效果: 在历史记录中 显示曾经搜索过的内容 不显示重复内容 并且可以删除历史记录</p>
<p>原理: 通过<code>localStorage</code> 永久储存缓存方法 把搜索内容存入浏览器缓存 再调用打印到页面上</p>
<p><font color = #ff3040>注意: </font>浏览器缓存的数据格式是 json 需要用到 <code>JSON.parse()</code>方法 转换数据成字符串</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/PxR4tygA6lXKSV1.png" alt="image.png"></p>
<ul>
<li><code>script</code> 脚本 <code>data()</code>存储数据<ul>
<li><code>JSON.parse(localStorage.getItem(&#39;search&#39;)</code> 把缓存到浏览器的数据读取出来 并且<code>JSON.parse</code>转换为字符串</li>
</ul>
</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      // 搜索关键字(搜索框里面的内容)</span><br><span class="line">      q: &#x27;&#x27;,</span><br><span class="line"><span class="addition">+      // ~ 历史关键字保存对象</span></span><br><span class="line"><span class="addition">+      // ~ 给历史关键字保存获取本地缓存的搜索数据 让其循环遍历到页面上</span></span><br><span class="line"><span class="addition">+     // ~ 3. 读取永久储存 localStorage的搜索缓存 缓存数据是字符串 需要转成对象</span></span><br><span class="line"><span class="addition">+ history: JSON.parse(localStorage.getItem(&#x27;search&#x27;) || &#x27;[]&#x27;) // ~ 如果没有值 让其显示为空的字符串数组</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> 方法函数<ul>
<li>回车触发后 把搜索数据 储存到 对象里<ul>
<li>使用<code>localStorage.setItem</code> 把对象里面的搜索数据永久缓存到浏览器上</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// ~ 回车搜索的配置(同时保存其历史记录)</span></span><br><span class="line">  handleSearch () &#123;</span><br><span class="line">    <span class="comment">// ~  回车触发后 保存历史关键字</span></span><br><span class="line">    <span class="comment">// ~ 把输入的内容 保存到历史关键字对象里</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">history</span>.<span class="title function_">unshift</span>(<span class="variable language_">this</span>.<span class="property">q</span>)</span><br><span class="line">    <span class="comment">// ~ 把保存历史关键字对象 把历史数据 永久存储到浏览器</span></span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;search&#x27;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="variable language_">this</span>.<span class="property">history</span>))</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code> 模板<ul>
<li>搜索历史布局 把搜索历史 <code>v-for</code> 循环遍历打印到页面上</li>
<li>@search按下回车点击搜索触发方法 由Vant 插件提供</li>
<li>v-else-if判断 如果存在搜索数据 才会显示内搜索记录  否则就不显示搜索记录<ul>
<li><code>&lt;div class=&quot;history-box&quot; v-else-if=&quot;history.length&quot;&gt;</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;!-- 导航栏 --&gt;</span><br><span class="line">    &lt;van-nav-bar title=&quot;搜索中心&quot; left-arrow @click-left=&quot;$router.back()&quot; /&gt;</span><br><span class="line">    &lt;!-- 搜索框 Vant search 提供的方法  @search按下回车点击搜索触发 .trim Vue提供的修饰符 用户去除两边空格(防止用户在两边输入空格)--&gt;</span><br><span class="line">    &lt;van-search @search=&#x27;handleSearch&#x27; v-model.trim=&quot;q&quot; placeholder=&quot;请输入搜索关键词&quot; shape=&quot;round&quot; /&gt;</span><br><span class="line">    &lt;!-- 通过v-if v-else 判断 如果有输入内容 就切换成联想列表 没有输入内容就显示历史记录 --&gt;</span><br><span class="line">    &lt;!-- 联想列表 --&gt;</span><br><span class="line">    &lt;van-cell-group class=&quot;suggest-box&quot; v-if=&#x27;q&#x27;&gt;</span><br><span class="line">      &lt;van-cell icon=&quot;search&quot;&gt;</span><br><span class="line">        &lt;p&gt;&lt;span&gt;j&lt;/span&gt;ava&lt;/p&gt;</span><br><span class="line">      &lt;/van-cell&gt;</span><br><span class="line">    &lt;/van-cell-group&gt;</span><br><span class="line">    &lt;!-- 搜索历史 --&gt;</span><br><span class="line">    &lt;!-- v-else-if判断 如果存在搜索数据 才会显示内搜索记录  否则就不显示搜索记录 --&gt;</span><br><span class="line">    &lt;div class=&quot;history-box&quot; v-else-if=&quot;history.length&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;head&quot;&gt;</span><br><span class="line">        &lt;span&gt;历史记录&lt;/span&gt;</span><br><span class="line">        &lt;van-icon name=&quot;delete&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;van-cell-group&gt;</span><br><span class="line">        &lt;van-cell v-for=&quot;(item,index) in history&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">          &lt;a class=&quot;word_btn&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/a&gt;</span><br><span class="line">          &lt;van-icon class=&quot;close_btn&quot; slot=&quot;right-icon&quot; name=&quot;cross&quot; /&gt;</span><br><span class="line">        &lt;/van-cell&gt;</span><br><span class="line">      &lt;/van-cell-group&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h3 id="历史数据去重-覆盖上面"><a href="#历史数据去重-覆盖上面" class="headerlink" title="历史数据去重(覆盖上面)"></a>历史数据去重(覆盖上面)</h3><ul>
<li><code>script</code> 脚本  <code> methods</code> 函数方法<ul>
<li>需要进行空格效验 不能让空格数据 储存到服务器缓存中 <code>if (!this.q.trim()) return</code></li>
<li>相同的搜索历史不显示 需要用到<code>new Set()</code> 方法去重</li>
<li>去重后 需要把 js数据转换成 json 数据<code>JSON.stringify()</code> 才能存储到服务器缓存</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 回车搜索的配置(同时保存其历史记录)</span></span><br><span class="line">handleSearch () &#123;</span><br><span class="line">  <span class="comment">// ~ 1. 防止用户输入空格搜索 trim()方法取消首尾空格后 没有数据 取反返回true 如果为true return 跳出方法</span></span><br><span class="line">  <span class="keyword">if</span> (!<span class="variable language_">this</span>.<span class="property">q</span>.<span class="title function_">trim</span>()) <span class="keyword">return</span></span><br><span class="line">  <span class="comment">// ~ 2. 回车触发后 保存历史关键字</span></span><br><span class="line">  <span class="comment">// ~ 把输入的内容 保存到历史关键字对象里 unshift会把数据添加到第一项 push是默认添加到结尾</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">history</span>.<span class="title function_">unshift</span>(<span class="variable language_">this</span>.<span class="property">q</span>)</span><br><span class="line">  <span class="comment">// ~ 3. 进行搜索数据的去重 new Set() 方法去重后自动生成数组 把没有重复的数组覆盖到 原先数组中</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">history</span> = [...<span class="keyword">new</span> <span class="title class_">Set</span>(<span class="variable language_">this</span>.<span class="property">history</span>)]</span><br><span class="line">  <span class="comment">// ~ 4. 把保存历史关键字对象 把历史数据 永久存储到浏览器</span></span><br><span class="line">  <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;search&#x27;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="variable language_">this</span>.<span class="property">history</span>))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>总结：基于ES6提供Set构造函数进行去重比较方便</p>
<p>注意：Set是ES6引入的一个构造函数，存储结构和数组类似，其中不允许放重复数据</p>
<h3 id="删除历史数据"><a href="#删除历史数据" class="headerlink" title="删除历史数据"></a>删除历史数据</h3><ul>
<li><code>template</code> 模板<ul>
<li>分别绑定两种删除<ul>
<li>一种是 单独点击搜索条目删除按钮后 删除该搜索记录 (需要携带搜索条目id 在页面数据中删除)</li>
<li>一种是 点击后 清空所有的搜索记录 (直接用<code>localStorage.removeItem()</code>删除浏览器缓存搜索记录)</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 搜索历史 --&gt;</span><br><span class="line">&lt;!-- v-else-if判断 如果存在搜索数据 才会显示内搜索记录  否则就不显示搜索记录 --&gt;</span><br><span class="line">&lt;div class=&quot;history-box&quot; v-else-if=&quot;history.length&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;head&quot;&gt;</span><br><span class="line">    &lt;span&gt;历史记录&lt;/span&gt;</span><br><span class="line">    &lt;!-- ? 绑定删除全部搜索历史的方法 --&gt;</span><br><span class="line">    &lt;van-icon @click=&#x27;deleteAll&#x27; name=&quot;delete&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">  &lt;van-cell-group&gt;</span><br><span class="line">    &lt;van-cell v-for=&quot;(item,index) in history&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">      &lt;a @click=&quot;handleJump(item)&quot; class=&quot;word_btn&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/a&gt;</span><br><span class="line">      &lt;!-- ? 绑定删除指定历史条目的方法 --&gt;</span><br><span class="line">      &lt;van-icon @click=&#x27;deleteSingle(index)&#x27; class=&quot;close_btn&quot; slot=&quot;right-icon&quot; name=&quot;cross&quot; /&gt;</span><br><span class="line">    &lt;/van-cell&gt;</span><br><span class="line">  &lt;/van-cell-group&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code>脚本 <code> methods:</code> 函数方法</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 删除搜索单个条目</span></span><br><span class="line">deleteSingle (index) &#123; <span class="comment">// ? 获取其索引值 进行删除</span></span><br><span class="line">  <span class="comment">// ? 在页面数据历史记录  找到指定索引 进行删除</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">history</span>.<span class="title function_">splice</span>(index, <span class="number">1</span>)</span><br><span class="line">  <span class="comment">// ? 在浏览器缓存中删除(重新把页面数据覆盖到浏览器缓存中)</span></span><br><span class="line">  <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;search&#x27;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="variable language_">this</span>.<span class="property">history</span>))</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// ? 删除全部搜索内容</span></span><br><span class="line">deleteAll () &#123;</span><br><span class="line">  <span class="comment">// ? 清空页面数据历史记录(清除所有记录)</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">history</span> = []</span><br><span class="line">  <span class="comment">// ? 清空浏览器缓存中的数据</span></span><br><span class="line">  <span class="variable language_">localStorage</span>.<span class="title function_">removeItem</span>(<span class="string">&#x27;search&#x27;</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>注意：删除时要删除两个部分：1、data中的数据；2、缓存中的数据</p>
<h2 id="关键字联想列表-search-vue"><a href="#关键字联想列表-search-vue" class="headerlink" title="关键字联想列表 search.vue"></a>关键字联想列表 <code>search.vue</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/search">Vant 提供搜索插件</a></p>
<blockquote>
<p>目标：用书输入搜索内容 获取服务器返回的联想 </p>
<p>效果: 当用户输入的时候 显示模糊搜索联想</p>
<p>原理: 输入绑定@input功能 实现用户输入就获取其数据 用户输入数据 提交服务器 服务器返回 模糊匹配数据 打印到页面</p>
<p><font color = #ff3040>注意: </font> 需要设置<code>函数防抖 debounce</code> 限制提交频率 在规定时间内 只上传一次数据 (1秒)</p>
</blockquote>
<ul>
<li><code>template</code> 模板设置<ul>
<li>设置 <code>@input</code>方法 用户输入内容时候 触发方法</li>
<li>循环遍历 服务器返回的搜索匹配 打印到页面上</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 搜索框 Vant search 提供的方法  @search按下回车点击搜索触发 .trim Vue提供的修饰符 用户去除两边空格(防止用户在两边输入空格)</span><br><span class="line">       绑定 @input功能 只要用户开始搜索 就触发--&gt;</span><br><span class="line"> &lt;van-search @input=&quot;keywordList&quot; @search=&#x27;handleSearch&#x27; v-model.trim=&quot;q&quot; placeholder=&quot;请输入搜索关键词&quot; shape=&quot;round&quot; /&gt;</span><br><span class="line"> &lt;!-- 通过v-if v-else 判断 如果有输入内容 就切换成联想列表 没有输入内容就显示历史记录 --&gt;</span><br><span class="line"> &lt;!-- 联想列表 --&gt;</span><br><span class="line"> &lt;van-cell-group class=&quot;suggest-box&quot; v-if=&#x27;q&#x27;&gt;</span><br><span class="line">   &lt;!-- 携带点击搜索结果的详细条目信息 --&gt;</span><br><span class="line">   &lt;van-cell @click.stop=&#x27;handleJump(items)&#x27; v-for=&quot;(items,index) in keylist&quot; :key=&quot;index&quot; icon=&quot;search&quot;&gt;</span><br><span class="line">     &lt;!-- 使用v-html 实现样式也能打印出来 --&gt;</span><br><span class="line">     &lt;p&gt;&#123;&#123;items&#125;&#125;&lt;/p&gt;</span><br><span class="line">     &lt;!-- &lt;p&gt;&#123;&#123;items&#125;&#125;&lt;/p&gt; --&gt;</span><br><span class="line">   &lt;/van-cell&gt;</span><br><span class="line"> &lt;/van-cell-group&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code> data()</code> 储存数据<ul>
<li>存储 服务器返回的搜索数据 </li>
<li>存储 把用户搜索的关键字 储存到函数防抖机制中</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">data () &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="comment">//! 搜索关键字(搜索框里面的内容)</span></span><br><span class="line">    <span class="attr">q</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line"> <span class="comment">//! 创建一个空对象 服务器返回的搜索数据</span></span><br><span class="line">    <span class="attr">keylist</span>: [],</span><br><span class="line">    <span class="comment">//! 创建一个函数防抖函数 默认为空null(对象存储起来 用于删除防抖定时)</span></span><br><span class="line">    <span class="attr">timer</span>: <span class="literal">null</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code> methods</code> 函数方法<ul>
<li>需要设置函数防抖 1秒内 只会向服务器请求一次数据 </li>
<li>需要设置 空格效验 不能让空格数据 上传服务器 进行获取 <code>if (!this.q.trim()) return</code></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 搜索功能的实现</span></span><br><span class="line">keywordList () &#123;</span><br><span class="line">  <span class="comment">//! 添加搜索的 函数防抖(利用定时器 在一定时间内向服务器发送一次指令 防止频繁发送指令给服务器)</span></span><br><span class="line">  <span class="comment">//! 1. 当数据传入过来的时候 重置(清除)上一个防抖定时器</span></span><br><span class="line">  <span class="built_in">clearTimeout</span>(<span class="variable language_">this</span>.<span class="property">timer</span>)</span><br><span class="line">  <span class="comment">//! 2. 防止用户输入空格搜索 trim()方法取消首尾空格后 没有数据 取反返回true 如果为true return 跳出方法</span></span><br><span class="line">  <span class="keyword">if</span> (!<span class="variable language_">this</span>.<span class="property">q</span>.<span class="title function_">trim</span>()) <span class="keyword">return</span></span><br><span class="line">  <span class="comment">//! 3. 创建一个防抖函数(定时器)</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">timer</span> = <span class="built_in">setTimeout</span>(<span class="keyword">async</span> () =&gt; &#123; <span class="comment">//! 5. 需要设置async同步</span></span><br><span class="line">    <span class="comment">//! 6. 向服务器发送数据</span></span><br><span class="line">    <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">searchList</span>(<span class="variable language_">this</span>.<span class="property">q</span>)</span><br><span class="line">    <span class="comment">//! 7. 把服务器传回的值 保存到页面搜索数据里 用于打印到页面上</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">keylist</span> = ret.<span class="property">data</span>.<span class="property">options</span></span><br><span class="line">  &#125;, <span class="number">1000</span>) <span class="comment">//! 每隔一秒钟 触发一次(向服务器发送数据)</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="函数防抖介绍"><a href="#函数防抖介绍" class="headerlink" title="函数防抖介绍"></a>函数防抖介绍</h3><blockquote>
<p>目的: 限制任务执行的频率(防止同一时间 多次把数据上传到服务器)</p>
<p>原理: 使用 <code>setTimeout</code> 来存放待执行的函数，这样可以很方便的利用 <code>clearTimeout</code> 在合适的时机来清除待执行的函数</p>
<p>场景: 关键字搜索 账号重复性验证 (输入效验 搜索返回)</p>
<p>作用: 如果连续两次触发条件的时间间隔超过规定的时间，那么才触发一次任务，如果两次触发条件的间隔小于这个固定时间，那么始终不触发任务。(上一个任务 覆盖下一个任务 直到最后执行一个任务)</p>
</blockquote>
<p>函数防抖: 连续两次触发条件超过特定时间才会执行一次任务</p>
<hr>
<p>总结：</p>
<ol>
<li>函数防抖 debounce ：连续两次触发条件超过特定时间才会执行一次任务。（关键字搜索、账号重复性验证）</li>
<li>函数节流 throttle：在固定的时间内，无论触发多少次条件，仅仅执行一次任务。（分页动态加载）</li>
</ol>
<h2 id="动态路由跳转-搜索内容页面-sresult-vue"><a href="#动态路由跳转-搜索内容页面-sresult-vue" class="headerlink" title="动态路由跳转 搜索内容页面 sresult.vue"></a>动态路由跳转 搜索内容页面 <code>sresult.vue</code></h2><p><a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/essentials/navigation.html#%E7%BC%96%E7%A8%8B%E5%BC%8F%E7%9A%84%E5%AF%BC%E8%88%AA">编程式导航 (动态路由) 介绍</a></p>
<blockquote>
<p>目标：当用户点击搜索 或者 回车的时候 跳转到 搜索内容页面 </p>
<p>原理:  当用户触发搜索时候 通过动态路由 携带用户搜索数据 上传服务器 获取搜索匹配的数据</p>
<p><font color = #ff3040>注意: </font>需要用到动态路由 携带参数 上传服务器 如果文章id过长 需要用到<a target="_blank" rel="noopener" href="https://liukaili.vercel.app/blogs/docs/axios/axios_transform.html"> json-bigint插件处理</a> 转换的id值如果绑定是<code>:key</code> 需要用 <code>toString()</code> 把拆分id对象 转为字符串</p>
</blockquote>
<p><img src="https://i.loli.net/2021/06/13/SJmWGvlsTAc5gFX.png" alt="image-20210613153437861"></p>
<h3 id="配置动态跳转搜索内容页的路由-search-vue"><a href="#配置动态跳转搜索内容页的路由-search-vue" class="headerlink" title="配置动态跳转搜索内容页的路由 search.vue"></a>配置动态跳转搜索内容页的路由 <code>search.vue</code></h3><blockquote>
<p>在 搜索页面上 配置搜索内容的 动态路由 <code>search.vue</code></p>
</blockquote>
<ul>
<li>搜索页面一般为 动态路由 携带用户数据 跳转到 搜索内容页面 <ul>
<li>携带的用户数据 比对服务器 获取服务器返回的数据 渲染到页面上</li>
</ul>
</li>
<li>使用 <code>? </code> <code>query</code>动态路由配置写法 显示效果: <code>/sresult?kw=aaa123</code></li>
</ul>
<blockquote>
<p>回车触发搜索进行跳转</p>
</blockquote>
<ul>
<li><code>template</code> 模板</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 搜索框 Vant search 提供的方法  @search按下回车点击搜索触发 .trim Vue提供的修饰符 用户去除两边空格(防止用户在两边输入空格)</span><br><span class="line">         绑定 @input功能 只要用户开始搜索 就触发--&gt;</span><br><span class="line">   &lt;van-search @input=&quot;keywordList&quot; @search=&#x27;handleSearch&#x27; v-model.trim=&quot;q&quot; placeholder=&quot;请输入搜索关键词&quot; shape=&quot;round&quot; /&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods: </code>函数方法<ul>
<li><strong>使用</strong> <strong><code>?</code></strong> <code>query</code>态路由配置写法 显示效果:<code>/sresult?kw=aaa123</code></li>
<li>用对象方式 配置动态路由 通过<code>query</code> 对象传值</li>
</ul>
</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">    // ~ 回车搜索的配置(同时保存其历史记录)</span><br><span class="line">    handleSearch () &#123;</span><br><span class="line">   // ~ 1. 防止用户输入空格搜索 trim()方法取消首尾空格后 没有数据 取反返回true 如果为true return 跳出方法</span><br><span class="line">      if (!this.q.trim()) return</span><br><span class="line">      // ~ 2. 回车触发后 保存历史关键字</span><br><span class="line">      // ~ 把输入的内容 保存到历史关键字对象里 unshift会把数据添加到第一项 push是默认添加到结尾</span><br><span class="line">      this.history.unshift(this.q)</span><br><span class="line">      // ~ 3. 进行搜索数据的去重 new Set() 方法去重后自动生成数组 把没有重复的数组覆盖到 原先数组中</span><br><span class="line">      this.history = [...new Set(this.history)]</span><br><span class="line">      // ~ 4. 把保存历史关键字对象 把历史数据 永久存储到浏览器</span><br><span class="line">      localStorage.setItem(&#x27;search&#x27;, JSON.stringify(this.history))</span><br><span class="line"><span class="addition">+      // 回车跳转到搜索列表页面(动态路由设置) /? 也是一种路由跳转传递参数的设置</span></span><br><span class="line"><span class="addition">+       this.$router.push(&#123;</span></span><br><span class="line"><span class="addition">+         name: &#x27;myresult&#x27;, // name是该路径的别名 需要给路由组件设置一样名称 作用跟path一样 动态跳转</span></span><br><span class="line"><span class="addition">+         query: &#123; // 利用 query 动态路由跳转方法 携带数据 跳转到二级路由上</span></span><br><span class="line"><span class="addition">+           // 携带搜索关键字的数据 左边属性名 需要和 设置的?后面路径一致 右边是要携带的属性值</span></span><br><span class="line"><span class="addition">+           kw: this.q</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>鼠标点击历史记录进行跳转</p>
</blockquote>
<ul>
<li><code>template</code>模板 <ul>
<li>需要阻止阻止其冒泡行为 防止删除的时候触发跳转 搜索内容页面</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;van-cell v-for=&quot;(item,index) in history&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">  &lt;!-- 设置鼠标点击搜索历史进行跳转 注意为了防止冒泡行为 需要设置 .stop阻止冒泡行为 --&gt;</span><br><span class="line">  &lt;a @click.stop=&quot;handleJump(item)&quot; class=&quot;word_btn&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/a&gt;</span><br><span class="line">  &lt;!-- ? 绑定删除指定历史条目的方法 --&gt;</span><br><span class="line">  &lt;van-icon @click=&#x27;deleteSingle(index)&#x27; class=&quot;close_btn&quot; slot=&quot;right-icon&quot; name=&quot;cross&quot; /&gt;</span><br><span class="line">&lt;/van-cell&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods: </code>函数方法<ul>
<li><strong>使用</strong> <strong><code>?</code></strong> <code>query</code>态路由配置写法 显示效果:<code>/sresult?kw=aaa123</code></li>
<li>用对象方式 配置动态路由 通过<code>query</code> 对象传值</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 搜索联想 点击跳转到搜索页面方法(动态路由的处理)</span></span><br><span class="line">handleJump (kw) &#123;</span><br><span class="line">  <span class="comment">// kw此时包括span高亮的标签，需要去掉</span></span><br><span class="line">  <span class="keyword">const</span> reg = <span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">`&lt;span&gt;<span class="subst">$&#123;<span class="variable language_">this</span>.q&#125;</span>&lt;/span&gt;`</span>, <span class="string">&#x27;ig&#x27;</span>)</span><br><span class="line">  kw = kw.<span class="title function_">replace</span>(reg, <span class="variable language_">this</span>.<span class="property">q</span>) <span class="comment">// 替换方法 replace(替换的规则,需要替换的数据)</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;myresult&#x27;</span>, <span class="comment">// name是该路径的别名 需要给路由组件设置一样名称 作用跟path一样 动态跳转</span></span><br><span class="line">    <span class="attr">query</span>: &#123; <span class="comment">// 利用 query 动态路由跳转方法 携带数据 跳转到二级路由上</span></span><br><span class="line">      <span class="comment">// 携带搜索关键字的数据 左边属性名 需要和 设置的?后面路径一致 右边是要携带的属性值</span></span><br><span class="line">      <span class="attr">kw</span>: kw</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在路由映射文件 配置动态路由 <code>router文件夹 里面 index.js</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入搜索内容页</span></span><br><span class="line"><span class="keyword">import</span> sresult <span class="keyword">from</span> <span class="string">&#x27;../views/search/sresult&#x27;</span> </span><br><span class="line"><span class="comment">// 配置其动态路由 设置name 好调用</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/sresult&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;myresult&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: sresult</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="配置搜索内容接口api-分页获取-search-js"><a href="#配置搜索内容接口api-分页获取-search-js" class="headerlink" title="配置搜索内容接口api (分页获取)  search.js"></a>配置搜索内容接口api (分页获取) <code> search.js</code></h3><blockquote>
<p>配置在 <code>api文件夹 里面 search.js</code></p>
</blockquote>
<ul>
<li>基于页码（pagenum）和每页条数（pagesize）实现分页</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 根据关键字 搜索文章列表的api接口</span></span><br><span class="line"><span class="comment">//! 分页方法: 根据 pagenum pagesize 根据页码 和 每页条数 进行分页</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">searchArticles</span> = (<span class="params">options</span>) =&gt; &#123; <span class="comment">// 分页传参的时候 直接传对象即可</span></span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/search&#x27;</span>,</span><br><span class="line">    <span class="comment">// axios传递get请求参数本来就是使用params</span></span><br><span class="line">    <span class="comment">// 利用传统的分页方法 获取分页的文章列表</span></span><br><span class="line">    <span class="attr">params</span>: &#123;</span><br><span class="line">      <span class="comment">// 当前页码</span></span><br><span class="line">      <span class="attr">page</span>: options.<span class="property">pagenum</span>,</span><br><span class="line">      <span class="comment">// 每页的条数</span></span><br><span class="line">      <span class="attr">per_page</span>: options.<span class="property">pagesize</span>,</span><br><span class="line">      <span class="comment">// 查询的关键字</span></span><br><span class="line">      <span class="attr">q</span>: options.<span class="property">kw</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="创建显示搜索内容的页面-sresult-vue"><a href="#创建显示搜索内容的页面-sresult-vue" class="headerlink" title="创建显示搜索内容的页面 sresult.vue"></a>创建显示搜索内容的页面 <code>sresult.vue</code></h3><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/list">Vant-list组件</a></p>
<blockquote>
<p>搜索显示页面 需要单独创建 <code>search文件夹 里面 sresult.vue</code></p>
</blockquote>
<ul>
<li><code>template</code> 模板<ul>
<li><code>@load</code>是声明下拉获取数据方法 当频道没有数据的时候 自动执行</li>
<li>循环遍历 服务器返回搜索结果 到页面上</li>
<li>进行判断 如果 数据图片为3张时候 把类名设置为 w33 如果为1张时候 把类名设置为w100 (利用动态类名 <code>:clas&#39;[&#123;&#125;]&#39;</code> )</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;!-- 导航固定定位 fixed --&gt;</span><br><span class="line">    &lt;van-nav-bar fixed title=&quot;搜索结果&quot; left-arrow @click-left=&quot;$router.back()&quot; /&gt;</span><br><span class="line">    &lt;!-- 文章列表  @load是声明下拉获取数据方法 当频道没有数据的时候 自动执行--&gt;</span><br><span class="line">    &lt;van-list v-model=&quot;loading&quot; :finished=&quot;finished&quot; finished-text=&quot;没有更多了&quot; @load=&#x27;onLoad&#x27;&gt;</span><br><span class="line">      &lt;van-cell-group&gt;</span><br><span class="line">        &lt;!-- 把服务器获取的数据 渲染到页面上 id需要 toString()一下 因为用了 json-bigint解决了id太长js不识别问题 --&gt;</span><br><span class="line">        &lt;van-cell v-for=&quot;item in list&quot; :key=&#x27;item.art_id.toString()&#x27;&gt;</span><br><span class="line">          &lt;div class=&quot;article_item&quot;&gt;</span><br><span class="line">            &lt;h3 class=&quot;van-ellipsis&quot;&gt;&#123;&#123;item.title&#125;&#125;&lt;/h3&gt;</span><br><span class="line">            &lt;div class=&quot;img_box&quot;&gt;</span><br><span class="line">      &lt;!-- 进行判断 如果 数据图片为3张时候 把类名设置为 w33 如果为1张时候 把类名设置为w100 --&gt;</span><br><span class="line">      &lt;!-- 循环遍历 v-for 获取储存的数组中的数据 --&gt;</span><br><span class="line">              &lt;van-image lazy-load :class=&#x27;[&#123;w33: item.cover.type === 3&#125;, &#123;w100: item.cover.type === 1&#125;]&#x27; :key=&#x27;index&#x27; v-for=&#x27;(img, index) in item.cover.images&#x27; fit=&quot;cover&quot; :src=&quot;img&quot; /&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">            &lt;div class=&quot;info_box&quot;&gt;</span><br><span class="line">              &lt;span&gt;&#123;&#123;item.aut_name&#125;&#125;&lt;/span&gt;</span><br><span class="line">              &lt;span&gt;&#123;&#123;item.comm_count&#125;&#125; 评论&lt;/span&gt;</span><br><span class="line">              &lt;span&gt;&#123;&#123;item.pubdate|formatTime&#125;&#125;&lt;/span&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">        &lt;/van-cell&gt;</span><br><span class="line">      &lt;/van-cell-group&gt;</span><br><span class="line">    &lt;/van-list&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>style</code> 样式</li>
</ul>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span> <span class="selector-tag">scoped</span> <span class="selector-tag">lang</span>=&#x27;<span class="selector-tag">less</span>&#x27;&gt;</span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">padding-top</span>: <span class="number">92px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">overflow-y</span>: auto;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.article_item</span> &#123;</span><br><span class="line">  <span class="selector-tag">h3</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: normal;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">2</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.img_box</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">    <span class="selector-class">.w33</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">33%</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.w100</span> &#123;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">360px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.info_box</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">2</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="selector-tag">span</span> &#123;</span><br><span class="line">      <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/<span class="selector-tag">style</span>&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="获取搜索结果-上拉显示搜索结果-首页文章列表组件一致-sresult-vue"><a href="#获取搜索结果-上拉显示搜索结果-首页文章列表组件一致-sresult-vue" class="headerlink" title="获取搜索结果 上拉显示搜索结果(首页文章列表组件一致) sresult.vue"></a>获取搜索结果 上拉显示搜索结果(首页文章列表组件一致) <code>sresult.vue</code></h3><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/list">Vant-list组件</a></p>
<ul>
<li><code>script</code> 脚本  导入搜索接口api</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 导入搜索接口的api</span><br><span class="line">import &#123; searchArticles &#125; from &#x27;../../api/search&#x27;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>data()</code>存储数据<ul>
<li>设置 Vant-list组件的 上拉加载状态位 和 加载结束状态位</li>
<li>设置 请求参数(携带关键字 通过pagenum pagesize 实现分页) 利用传统的分页方法 获取分页的文章列表</li>
<li>设置 获取服务器返回数据 储存的数组</li>
<li>设置 列表的总数 比对服务器总数目判断是否加载完毕</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"> </span><br><span class="line"></span><br><span class="line">data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="comment">// 单次加载状态位(Vant提供)</span></span><br><span class="line">      <span class="attr">loading</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 列表是否完全加载完成的标志(Vant提供)</span></span><br><span class="line">      <span class="attr">finished</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="comment">// 请求参数(携带关键字 通过pagenum pagesize 实现分页) 利用传统的分页方法 获取分页的文章列表</span></span><br><span class="line">      <span class="attr">queryData</span>: &#123;</span><br><span class="line">        <span class="comment">// 当前页码 让其显示第一页(最近接模糊搜索的值)</span></span><br><span class="line">        <span class="attr">pagenum</span>: <span class="number">1</span>,</span><br><span class="line">        <span class="comment">// 每页的条数 (根据接口文件设置)</span></span><br><span class="line">        <span class="attr">pagesize</span>: <span class="number">10</span>,</span><br><span class="line">        <span class="comment">// 查询关键字</span></span><br><span class="line">        <span class="attr">kw</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 获取服务器返回搜索数据 储存的数组</span></span><br><span class="line">      <span class="attr">list</span>: [],</span><br><span class="line">      <span class="comment">// 列表的总数 比对服务器总数目判断是否加载完毕</span></span><br><span class="line">      <span class="attr">total</span>: <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code>created ()</code> 生命周期<ul>
<li>用户跳转到 搜索页面 就获取其动态路由携带的数据 储存到页面数据里 上传到服务器 获取服务器返回的搜索数据</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">created () &#123;</span><br><span class="line">  <span class="comment">// 让页面一跳转 就获取动态路由携带的数据 用于比对服务 进行模糊数据展示</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">queryData</span>.<span class="property">kw</span> = <span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">kw</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">list</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods: </code>函数方法<ul>
<li>把动态路由携带的数据 上传服务器 获取服务器返回搜索结果数据</li>
<li>把服务器返回的结果储存到 页面数组中 循环遍历到页面上</li>
<li>单次页面加载完毕后 手动设置单次加载状态位为false<code>this.loading = false</code></li>
<li>进行判断 加载总条数 等于 服务器 返回的总条数数据 终止列表文章加载</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">  <span class="comment">// 获取分页数据 并且实现分页效果</span></span><br><span class="line">  <span class="keyword">async</span> onLoad () &#123;</span><br><span class="line">    <span class="comment">// 页面加载时候 触发一次 如果不够一屏幕 自动调用一次 (Vant方法)</span></span><br><span class="line">    <span class="comment">// 比对搜索数据 获取服务器 数据</span></span><br><span class="line">    <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">searchArticles</span>(<span class="variable language_">this</span>.<span class="property">queryData</span>)</span><br><span class="line">    <span class="comment">// 把服务器 获取的数据 储存到页面对象里 需要使用 push方法 因为分页是动态获取数据 需要用push添加 不覆盖之前数据</span></span><br><span class="line">    <span class="comment">// ...是直接把所有数据全部添加进去 不用一个一个添加</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(...ret.<span class="property">data</span>.<span class="property">results</span>)</span><br><span class="line">    <span class="comment">// 设置服务器数据的总数(根据服务器返回)</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">total</span> = ret.<span class="property">data</span>.<span class="property">total_count</span></span><br><span class="line">    <span class="comment">// 单次页码 加载完成后 还原单次加载状态为(有数据刷新自动为true 需要手动设置为false)</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">loading</span> = <span class="literal">false</span></span><br><span class="line">    <span class="comment">// 判断时候加载了全部数据 加载全部数据让其 finished 加载完毕状态位 设置为true</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">list</span>.<span class="property">length</span> === <span class="variable language_">this</span>.<span class="property">total</span>) &#123; <span class="comment">// total是服务器返回的 模糊搜素条目的总数 满足总条数后 把获取文章列表状态位设置为true</span></span><br><span class="line">      <span class="comment">// 如果以展示所有数据 那么 把finished 加载完毕状态位 设置为true</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">finished</span> = <span class="literal">true</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 如果没有加载结束 继续获取数据(继续添加页码 服务器通过页码返回搜素数据的)</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">queryData</span>.<span class="property">pagenum</span> += <span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">total</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>基于pagenum和pagesize的分页逻辑</li>
<li>van-list组件的基本使用</li>
<li>类名的动态绑定的用法</li>
</ol>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/11/Vue_Mobile_Projects/8_search/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/11/Vue_Mobile_Projects/8_search/";
            const title         = "「7. Vue移动端 搜索功能设置」";
            const excerpt       = `::: tip 介绍
Vue移动端 搜索功能 通过动态路由传参 设置搜索页:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vant/" rel="tag">Vant</a>, <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">Vue移动端</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 6. Vue移动端 频道列表编辑操作" href="/2021/06/10/Vue_Mobile_Projects/7_Channel/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 8. Vue移动端 文章页面内容和功能" href="/2021/06/12/Vue_Mobile_Projects/9_Articles/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>